// 图表: 维修金额支出汇总
import * as $echarts from '../../../components/ec-canvas/echarts'
import $chartOption from '../../../data/chartOption.js'

const $app = getApp()

function initChart(canvas, width, height, dpr) {
  let chart = $echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  })
  canvas.setChart(chart)
  // 设置图表配置项
  let option = {
    title: { text: '维修金额支出汇总' },
    grid: {
      left: 10,
      right: 40,
      bottom: 10,
      top: 60,
      containLabel: true
    },
    xAxis: { // ===== x轴 =====
      type: 'category', // 类型: 类目轴
      name: '季度',
      axisLine: $chartOption.axis_axisLine // 轴线相关设置
      // axisTick: { alignWithLabel: true } // boundaryGap:true时, 刻度线和标签对齐
    },
    yAxis: { // ===== y轴 =====
      type: 'value',
      name: '金额',
      axisLine: $chartOption.axis_axisLine, // 轴线相关设置
      splitLine: $chartOption.axis_splitLine, // 分隔线
      axisLabel: {
        formatter: (value) => {
          return (value / 10000).toFixed(0) + '万'
        }
      }
    },
    dataZoom: [{ type: 'inside' }], // 区域缩放
    tooltip: { // ===== 提示框组件 =====
      ...$chartOption.tooltip_bar,
      formatter: (param) => {
        const b = param[0]
        return `${b.value[0]}：${b.value[1]}元`
      }
    },
    series: [{
      ...$chartOption.series_bar,
      barMaxWidth: 22, // 柱条的最大宽度
      label: {
        ...$chartOption.series_bar.label,
        position: 'top'
      },
      data: []
    }],
    color: $chartOption.color1,
    textStyle: $chartOption.textStyle // ===== 全局的字体样式 =====
  }
  $app.$api.data.repairAmount({}).then(({ data }) => {
    console.log('api-维修金额支出汇总', data)
    let newData = data || []
    newData.forEach(b => {
      const x = `${b.qcreateDate}季度` // 季度
      const y = b.allsum // 维修金额
      option.series[0].data.unshift([x, y])
    })
    chart.setOption(option)
  }).catch((err) => {})
  return chart
}

Component({
  data: {
    ec: { onInit: initChart }
  }
})
